<template>
    <div class="nav-box">
        <el-row class="tac">
            <el-col>
                <div style="display: flex;align-items: center;padding-left: 20px;">
                    <div class="logo"><img src="@/assets/imgs/logo.png" alt=""></div><span
                        style="color: white;margin-left: 10px;font-size: 16px;">外卖管理系统</span>
                </div>
                <!-- <h5 class="mb-2" style="width: 199.2px;overflow: hidden;"></h5> -->
                <el-menu active-text-color="#ffd04b" background-color="#2d3a4b" class="el-menu-vertical-demo"
                     text-color="#fff" @open="handleOpen" @close="handleClose" unique-opened :router="true" :default-active="path">
                    <!-- 循环遍历导航栏数据 判断是否有子菜单 -->
                    <template v-for="(item, index) in navList" :key="index">
                        <!-- el-sub-menu 有子菜单 -->
                        <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path" >
                            <!-- 一级菜单 -->
                            <template #title>
                                <el-icon>
                                    <!-- 动态渲染图标 -->
                                    <component :is="getIconComponent(item.icon)" />
                                </el-icon>
                                <span>{{ item.title }}</span>
                            </template>
                            <!-- 循环遍历子菜单数据 -->
                            <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex"
                                :index="child.path"
                                @click="handleMenuClick(child.path)" :class="path === child.path ? 'is-active' : ''">
                                {{ child.ctitle }}
                            </el-menu-item>
                        </el-sub-menu>
                        <!-- el-menu-item没有子菜单 -->
                        <el-menu-item v-else :index="item.path" @click="handleMenuClick(item.path)" :class="path === item.path ? 'is-active' : ''">
                            <el-icon>
                                <!-- 动态渲染图标 -->
                                <component :is="getIconComponent(item.icon)" />
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import {Menu, HomeFilled,Location,List, Shop, TrendCharts, Briefcase} from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';
import {computed,ref} from 'vue'
const router = useRouter();
const route = useRoute();
const openeds = ref<string[]>([]);

const path = computed(() => route.path);

const navList = [
    {
        title: '首页',
        icon: 'HomeFilled',
        path: '/home',
    },
    {
        title: '用户管理',
        icon: 'Briefcase',
        children: [
            { ctitle: '账号列表', path: '/accountList' },
            { ctitle: '添加账号', path: '/accountAdd' },
            { ctitle: '个人中心', path: '/accountCenter' },
            { ctitle: '修改密码', path: '/accountEdit' },
        ],
        path: '/account',
    },
    {
        title: '商品管理',
        icon: 'Menu',
        children: [
            { ctitle: '商品列表', path: '/goodsList' },
            { ctitle: '商品添加', path: '/goodsAdd' },
            { ctitle: '商品分类', path: '/goodsType' },
        ],
        path: '/goods',
    },
    {
        title: '订单管理',
        icon: 'List',
        path: '/orderList',
    },
    {
        title: '店铺管理',
        icon: 'Shop',
        path: '/shopInfo',
    },
    {
        title: '统计数据',
        icon: 'TrendCharts',
        children: [
            { ctitle: '商品统计', path: '/goodsStatistics' },
            { ctitle: '订单统计', path: '/orderStatistics' },
        ],
        path: '/tatistics',
    },
    {
        title: '权限管理',
        icon: 'TrendCharts',
        children: [
            { ctitle: '权限管理', path: '/permissionInfo' },
            { ctitle: '角色管理', path: '/rolePermission' },
        ],
        path: '/permission',
    },
]

const getIconComponent = (iconName: string) => {
    switch (iconName) {
        case 'HomeFilled':
            return HomeFilled
        case 'Briefcase':
            return Briefcase
        case 'Menu':
            return Menu
        case 'Location':
            return Location
        case 'List':
            return List
        case 'Shop':
            return Shop
        case 'TrendCharts':
            return TrendCharts
    }
}

const handleOpen = (key: string, keyPath: string[]) => {
    //改变默认打开
    openeds.value = keyPath
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}

const handleMenuClick = (str: string) => {
    router.push(str);
}
</script>

<style scoped>
.nav-box {
    width: 200px;
    height: 100%;
    background-color: #2d3a4b;
    /* overflow: hidden; */
}

.el-menu-vertical-demo {
    height: 100%;
}

.logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.logo img {
    width: 100%;
    height: 100%;
}
:deep(.el-menu) {
    border: none;
}
:deep(.el-menu-item.is-active){
    color: #409eff;
}


</style>